<template>
    <el-dialog title="英文大小写转换" v-model="englishGameDialog" width="800" :close-on-click-modal = false :before-close="stopgame">
      <div style="height: 500px;">
      类型转换：
        <el-select
          v-model="ConType"
          placeholder="Select"
          size="small"
          style="width: 240px"
          @change="convert"
        >
          <el-option
            v-for="item in ConTypeSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      <el-row style="margin-top: 50px;">
        <el-col :span = "12"><el-input
          v-model="textarea"
          maxlength="300"
          style="width: 100%"
          placeholder="Please input"
          show-word-limit
          type="textarea"
          :rows="15"
          @change = "convert"
        /></el-col>
        <el-col :span = "12">
          <div style="height: 100%; border: 1px solid #dcdfe6;">
            {{convert_text}}
          </div>
        </el-col>
      </el-row>
      </div>
  </el-dialog>
</template>
<script setup lang="ts" >
import { ref, nextTick, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
// import { ElMessage, ElMessageBox, ElDialog } from "element-plus";


// --------------------------------------变量初始化--------------------------------------
const router = useRouter();
const englishGameDialog = ref()
const textarea = ref()
const convert_text = ref()
const ConType = ref("toUpperCase")
const ConTypeSelect = [
  { label: "大写转小写", value: "toLowerCase" },
  { label: "小写转大写", value: "toUpperCase" }
]


// --------------------------------------事件方法--------------------------------------




const convert = () => {
  if (ConType.value === "toLowerCase") {
    convert_text.value = textarea.value.toLowerCase()
  }else {
    convert_text.value = textarea.value.toUpperCase()
  }
}

// --------------------------------------弹窗控制--------------------------------------
const props = defineProps({
  englishGameDialog: {
    type: Boolean,
    default: false
  }
});

// 确保子组件能够响应 `englishGameDialog` 的变化
watch(() => props.englishGameDialog, (newValue) => {
    englishGameDialog.value = newValue;
});

const stopgame = () => {
    emitCloseEvent(false)
}
const emitCloseEvent = (value:boolean) => {
  emit('update:englishGameDialog', value);
};
const emit = defineEmits(['update:englishGameDialog']);

</script>
<script lang="ts">
export default {
    name: "Englishutils"
}

</script>
<style scoped>

</style>